<template>
  <div>
    <el-tag type="warning">请检查个人信息,若有错误找管理员</el-tag>

    <el-form
      ref="studentForm"
      :model="studentForm"
      :rules="rules"
      label-width="100px"
      class="formStyle"
    >
      <el-avatar
        shape="square"
        :key="studentForm.avatar"
        :size="150"
        alt="学生头像"
        :src="BASE_API + '/' + studentForm.avatar"
        style="margin-left: 15%"
      ></el-avatar>
      <el-form-item label="姓名" prop="name">
        <el-input
          v-model="studentForm.name"
          placeholder="请输入姓名"
          class="inputWdith"
        ></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-radio-group v-model="studentForm.gender">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="0">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input
          class="inputWdith"
          placeholder="请输入年龄"
          v-model.number="studentForm.age"
          oninput="value=value.replace(/[^0-9.]/g,'')"
        ></el-input>
      </el-form-item>
      <el-form-item label="院系/专业" prop="departmentAndMajor">
        <el-cascader
          class="inputWdith"
          placeholder="请选择院系/专业/班级"
          v-model="studentForm.departmentAndMajor"
          key="id"
          :options="depAndMajorMenu"
          :props="optionProps"
          clearable
          ref="departmentAndMajor"
          @change="cascaderChange"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input
          v-model.number="studentForm.phone"
          class="inputWdith"
          placeholder="请输入联系电话"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <!-- <el-button
         type="primary"
          @click="submitForm('studentForm')"
          :style="
            $route.path.indexOf('editStudent') != -1
              ? 'margin-left: 40px;'
              : 'margin-left: 0px;'
          "
          v-loading.fullscreen.lock="fullscreenLoading"
          >确认</el-button
        >  -->

        <el-button type="primary" @click="editResume"> 编辑简历</el-button>
        <el-button type="primary" @click="previewResume"> 预览简历</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { reqQueryResumeById } from '@/views/Custom/ResumeMng/api/ResumeMngApi';
import { mapGetters } from 'vuex';
import { getToken } from '@/utils/auth';
export default {
  name: 'ShowInfo',
  computed: {
    ...mapGetters(['loginId', 'avatar']),
    ...mapGetters('StudentMng', ['depAndMajorMenu', 'studentInfo']),
    // ...mapGetters('loginId'),
  },
  watch: {
    studentInfo() {
      this.studentForm = {
        ...this.studentInfo,
      };
      this.$set(this.studentForm, 'departmentAndMajor', [
        this.studentInfo.departmentId,
        this.studentInfo.majorId,
        this.studentInfo.classroomId,
      ]);
    },
  },
  data() {
    var validateAge = (rule, value, callback) => {
      let reg = /^(?:[1-9][0-9]?|1[01][0-9]|120)$/; //年龄是1-120之间有效
      if (value == undefined) {
        callback([new Error('请输入年龄')]);
      } else {
        if (value) {
          if (!reg.test(value)) {
            callback([new Error('年龄输入不合法')]);
          } else {
            callback();
          }
        } else {
          callback(new Error('年龄输入不合法'));
        }
      }
    };
    var validateDepAndMajor = (rule, value, callback) => {
      if (!value) {
        callback([new Error('请选择院系/专业/班级')]);
      } else {
        if (value.length < 2) {
          callback([new Error('请选择专业/班级')]);
        } else if (value.length < 3) {
          callback([new Error('请选择班级')]);
        } else {
          callback();
        }
      }
    };

    return {
      BASE_API: process.env.VUE_APP_BASE_API, // 前缀
      fullscreenLoading: false, // 遮罩层
      studentForm: {}, // 学生表单
      hasAvatar: false,
      imageUrl: '',
      headers: {
        'X-Token': getToken(),
      },
      rules: {
        // 验证规则
        name: [
          {
            required: true,
            message: '请输入名称',
            whitespace: true,
            trigger: 'blur',
          },
          {
            pattern: /^[\u4E00-\u9FA5A-Za-z\s]+(·[\u4E00-\u9FA5A-Za-z]+)*$/,
            message: '请输入正确名称',
            trigger: 'blur',
          },
        ],
        gender: [
          {
            required: true,
            message: '请选择性别',
            trigger: 'change',
          },
        ],
        age: [{ required: true, validator: validateAge, trigger: 'blur' }],
        departmentAndMajor: [
          {
            required: true,
            message: '请选择院系/专业',
            trigger: 'change',
          },
          {
            required: true,
            validator: validateDepAndMajor,
            trigger: 'change',
          },
        ],

        phone: [
          {
            required: true,
            message: '请输入联系电话',
            trigger: 'blur',
          },
          {
            pattern: /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/,
            message: '请输入正确的电话号码',
            trigger: 'blur',
          },
        ],
      },
      optionProps: {
        value: 'id',
        label: 'name',
        children: 'children',
      },
    };
  },
  mounted() {
    this.getUserInfo();
    this.getDepAndMajorAndClassroomMenu();
  },
  methods: {
    editResume() {
      this.$router.push({
        name: 'resumeEdit',
      });
    },

    // 检测简历是否编辑
    checkEidtResume() {
      // 编辑简历
      reqQueryResumeById(this.loginId).then((res) => {
        if (res.data.flag) {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
            .then(() => {
              this.$router.push({
                name: 'resumeEdit',
              });
            })
            .catch(() => {});
        } else {
          this.$router.push({
            name: 'resumetemplate',
            params: {
              resumeRowInfo: { ...res.data.resumeInfo, avatar: this.avatar },
            },
          });
        }
      });
    },
    previewResume() {
      this.checkEidtResume();
    },
    // 获取用户信息
    getUserInfo() {
      this.$store.dispatch(
        'StudentMng/getStudentInfoByStudentId',
        this.$store.state.user.loginId
      );
    },
    // 获取院系、专业、班级的编号与名称树
    getDepAndMajorAndClassroomMenu() {
      this.$store.dispatch('StudentMng/getDepAndMaJorAndClassroomMenu');
    },

    // 级联选择器
    cascaderChange() {
      // this.$refs["departmentAndMajor"].getCheckedNodes()//完整的数据
      //this.$refs["departmentAndMajor"].getCheckedNodes()[0].pathLabels//value的值
    },
    // 回到学生列表
    back() {
      this.$router.replace({
        name: 'studentList',
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import '~@/styles/variables.scss';

.formStyle {
  @extend .marginStyle;

  .inputWdith {
    width: $formWidth;
  }
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
